<template>
  <div class="all">
    <div class="charge_txt">
      充值管理
    </div>
    <van-form v-model="charge" class="charge_content" @submit="submit_charge">

      <new-item class="wrap_input" :is_disabled="true" v-model="charge.charge_account" txt_tip="充值账户" />
      <new-item class="wrap_input" :is_disabled="true" v-model="charge.charge_person" txt_tip="充值人" />

      <new-item class="wrap_input" v-model="charge.charge_money" txt_tip="充值金额" />

      <button class="c_flex charge_button">
        充值
      </button>
      <div @click="charge_log" class="charge_log">
        充值记录
      </div>
    </van-form>
    <div class="charge_txt">
      消费管理
    </div>

    <van-form v-model="consume" class="charge_content" @submit="submit_consume">

      <new-item class="wrap_input" :is_disabled="true" :is_require="false" v-model="other_money" txt_tip="剩余金额" />
      <input-time :is_min_date="false" v-model="consume.consume_time"></input-time>

      <new-item class="wrap_input" v-model="consume.consume_money" txt_tip="消费金额" />


      <button class="c_flex charge_button">
        确定
      </button>
      <div @click="consume_log" class="charge_log">
        消费记录
      </div>
    </van-form>
  </div>
</template>

<script>
  import InputTime from "@/components/TimePicker/InputTime"
  import NewItem from '../form/NewItem.vue'
  import {
    ShoperService,
    ChargeService
  } from '@/api'
  export default {
    name: 'MoneyBalance',
    components: {
      InputTime,
      NewItem,
    },
    methods: {
      consume_log(){
        this.$router.push({
          path: 'consume_log',
          query: {
            id: this.$route.query.id,
            franchisee_id: this.franchisee_id,
          }
        })
      },
      charge_log() {
        this.$router.push({
          path: 'charge_log',
          query: {
            id: this.$route.query.id,
            franchisee_id: this.franchisee_id,
          }
        })
      },
      submit_charge() {
        ChargeService.charge({
          amount: this.charge.charge_money,
          franchisee_id: this.$route.query.id
        }).then(res => {
          console.log(res);
          if (res.code == 10000) {

            this.init();
          }
        })
      },
      submit_consume() {
        ChargeService.purchase({
          amount: this.consume.consume_money,
          franchisee_id: this.$route.query.id
        }).then(res => {
          console.log(res);
          if (res.code == 10000) {

            this.init();
          }
        })
      },
      init() {
        this.charge.charge_person = this.$store.getters.userInfo.name;
        ShoperService.getOne({}, this.$route.query.id).then(res => {
          this.charge.charge_account = res.data.franchisee_name;
          this.other_money = res.data.balance;
          this.franchisee_id = res.data.franchisee_id;
          console.log(res);

        })
      }
    },
    data() {
      return {
        other_money: '',
        franchisee_id: '',
        consume: {
          consume_time: new Date().toISOString().split('T')[0],
          consume_money: ''
        },
        charge: {
          charge_money: '',
          charge_account: '',
          charge_person: '',
        }
      }
    },
    mounted() {
      this.init();
    }

  }
</script>

<style lang="less" scoped>
  .all {
    margin: 0;
    padding: 40px 24px;
    background-color: #f3f5f7;
    min-height: calc(93vh);
    box-sizing: border-box;

    .charge_txt {
      color: rgba(51, 51, 51, 1);
      font-size: 24px;
      margin-bottom: 15px;
    }

    .charge_content {
      width: 702px;
      height: 518px;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 16px;
      padding-top: 25px;
      margin-bottom: 20px;

      .wrap_input {
        margin: 30px auto 0px;
        width: 75%;
      }

      .charge_button {
        width: 420px;
        height: 80px;
        background-color: rgba(242, 147, 33, 1);
        border-radius: 8px;
        color: rgba(255, 255, 255, 1);
        font-size: 28px;
        border-width: 0px;

        margin: 50px auto 30px;
      }

      .charge_log {
        color: rgba(102, 102, 102, 1);
        font-size: 20px;
        text-align: center;
      }
    }
  }
</style>